<template>
  <div class="card p-6">
    <h2 class="text-xl font-semibold text-gray-800 mb-6 text-center">
      {{ title }}
    </h2>

    <!-- 系统信息展示 -->
    <div v-if="info" class="space-y-4">
      <div class="info-item">
        <span class="info-label">项目名称</span>
        <span class="info-value">{{ info.name }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">版本号</span>
        <span class="info-value">{{ info.version }}</span>
      </div>
      <div class="info-item">
        <span class="info-label">作者</span>
        <span class="info-value">{{ info.author }}</span>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="text-center py-8 text-gray-500">
      <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p>{{ emptyText }}</p>
    </div>
  </div>
</template>

<script setup>
// 定义 props
defineProps({
  title: {
    type: String,
    default: '系统信息'
  },
  info: {
    type: Object,
    default: null
  },
  emptyText: {
    type: String,
    default: '暂无数据'
  }
})
</script>